<template>
  <div class="show">
    <NavbarIndex />
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <article v-show="is_title">
            <h3 class="title mt-3 mb-2" :style="'width:' + titlewidth"><span ref="titleWidth">{{news.title}}</span></h3>
            <p class="text-center">{{news.create_time*1000 | formatDate}}<span class="ml-2" v-if="news.author">作者：{{news.author}}</span><span class="ml-2" v-if="news.content_news_data.copyfrom">来源：{{news.content_news_data.copyfrom}}</span></p>
            <p class="content" v-html="news.content_news_data.content"></p>
          </article>
          <ul class="list-inline" v-if="news.keywords.length">
            <li class="list-inline-item"><strong>关键词：</strong></li>
            <li class="list-inline-item" v-for="item in news.keywords" :key="item.id">
              <router-link :to="'/keywords/' + item">
                {{item}}
              </router-link>
            </li>
          </ul>
          <ul class="list-unstyled" v-if="extendList.length">
            <li><strong>延伸阅读：</strong></li>
            <li class="pl-4 content" v-for="item in extendList" :key="item.id">
              <router-link :to="'/show/' + item.id">
                {{item.title}}
              </router-link>
            </li>
          </ul>
          <ul class="list-unstyled">
            <li><strong>信德网版权与免责声明：</strong></li>
            <li class="pl-4 mt-2">1、投稿：本网欢迎网络和传真等各类方式投稿，但请勿一稿多投。</li>
            <li class="pl-4">2、版权：凡本网注明"来源：信德报、信德网或信德编辑部译"的所有内容，版权均属于信德社所有。欢迎转载，但请注明出处。</li>
            <li class="pl-4">3、文责：欢迎各地教区、堂区、团体或个人提供当地新闻及其他稿件，信德网一旦刊登，版权虽属信德社，但并不代表本社或本网观点，文责一律由投稿者（教区、堂区、团体、个人）自负。</li>
            <li class="pl-4">4、转载：凡本网注明"来源：XXX（非信德报或信德网）"的内容，为本网网友推荐而转载自其他媒体。转载内容并不代表本网观点，转载的目的只在于传递分享更多信息。</li>
          </ul>
        </div>
        <div class="col-lg-4">
          <div class="row">
            <div class="col-xl-12 col-sm-6 col-12">
              <MallList />
            </div>
            <div class="col-xl-12 col-sm-6 col-12">
              <VideoList />
            </div>
            <div class="col-xl-12 col-sm-6 col-12">
              <BookList />
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import Carousel from "@/components/Carousel.vue";
import FooterIndex from "@/components/FooterIndex.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import MallList from "@/components/MallList.vue";
import VideoList from "@/components/VideoList.vue";
import BookList from "@/components/BookList.vue";
import { formatDate } from '../util/date.js';

export default {
  name: "home",
  components: {
    NavbarIndex,
    Carousel,
    FooterIndex,
    MallList,
    VideoList,
    BookList
  },
  data () {
    return {
      advert: { title: '12345' },
      domain: process.env.VUE_APP_baseURL,
      titlewidth: '100%',
      is_title: 0
    };
  },
  created () {
    this.getData();
  },
  watch: {
    '$route' (to, form) {
      this.getData();
    }
  },
  methods: {
    //获取详情页内容
    getData () {
      let that = this;
      that.axios
        .post("/content/advert/show", {
          id: that.$route.params.id
        })
        .then(function (ret) {
          ret.data.content = that.replaceStr(ret.data.content)
          that.advert = ret.data
          console.log('advert', ret.data)
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //替换详情内容图片url
    replaceStr: function (body) {
      //替换详情内容图片url
      let content = body.replace(
        /(src=)(['"])(.*)(['"])/g,
        '$1$2' + this.domain + '$3$4'
      )
      //替换详情内容图片大小
      content = content.replace(
        /(<img.*style=['"])(.*)(['"])/g,
        '$1 $3'
      )
      return content
    }
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>
<style>
.title {
  margin: auto;
}
.content img {
  max-width: 100%;
}
.content {
  font-size: 1.2rem;
  line-height: 2;
  font-weight: 400;
}
</style>
